<template>
	<!-- 发布 -->
	<view class="publish">
		<view class="content">
			<view class="main">
				<view class="row">
					<view class="left">发布分类</view>
					<view class="right">
						<picker mode="selector" :range="positions" @change="onPositionChange">
							<view class="picker">
								<input type="text" disabled v-model="form.classify" placeholder="请选择" />
								<uni-icons type="right" size="17" color="#adadad"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
				<view class="row" v-if="form.classify == '人才自荐'">
					<view class="left">姓名</view>
					<view class="right">
						<input type="text" v-model="form.realName" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="row" v-if="form.classify == '需求广场'">
					<view class="left">所需额度/万</view>
					<view class="right">
						<input type="text" v-model="form.sxed" placeholder="请输入所需额度" />
					</view>
				</view>
				<view class="row" v-if="form.classify == '需求广场'">
					<view class="left">资金用途</view>
					<view class="right">
						<input type="text" v-model="form.zjyt" placeholder="请输入资金用途" />
					</view>
				</view>
				<view class="row" v-if="form.classify == '需求广场'">
					<view class="left">年龄</view>
					<view class="right">
						<input type="text" v-model="form.age" placeholder="请输入年龄" />
					</view>
				</view>
				<view class="row row-column" v-if="form.classify == '需求广场'">
					<view class="left">资产情况</view>
					<view class="right">
						<textarea class="textarea" v-model="form.zcqk" placeholder="请输入资产情况" />
					</view>
				</view>
				<view class="row row-column" v-if="form.classify == '需求广场'">
					<view class="left">个人情况说明</view>
					<view class="right">
						<textarea class="textarea" v-model="form.zxqk" placeholder="请输入个人情况说明" />
					</view>
				</view>
				<view class="row" v-if="form.classify == '人才自荐' || form.classify == '需求广场'">
					<view class="left">城市</view>
					<view class="right">
						<uni-data-picker style="flex: 1;" :clear-icon="false" :localdata="items" v-model="form.address"
							popup-title="请选择城市" @change="onAddress"></uni-data-picker>
						<uni-icons type="right" size="17" color="#adadad"></uni-icons>
					</view>
				</view>
				<view class="row" v-if="form.classify == '人才自荐'">
					<view class="left">联系方式</view>
					<view class="right">
						<input type="text" v-model="form.telephone" placeholder="请输入联系方式" />
					</view>
				</view>
				<view v-if="form.classify == '人才自荐'" class="row row-column">
					<view class="ckmj" @click="showMjPopup">
						<view class="img">!</view> 查看秘籍
					</view>
					<view class="left">自我介绍</view>
					<view class="right">
						<textarea class="textarea" v-model="form.info" placeholder="请输入介绍内容" />
					</view>
				</view>
				<view class="ywfw" v-if="form.classify == '需求广场'">
					<view class="text">所需产品（可多选）</view>
					<view class="ywfw-wrapper">
						<view class="block" v-for="(item, index) in userScopeData" :key="index" @click="ywfwClick(item)"
							:class="item.active?'active':''">{{item.text}}</view>
					</view>
				</view>
				<view class="row" v-if="form.classify == '论坛'">
					<view class="left">主题</view>
					<view class="right">
						<input type="text" v-model="form.title" placeholder="请输入主题或标题" />
					</view>
				</view>
				<view class="ywfw" v-if="form.classify == '论坛'">
					<view class="text">标签（单选）</view>
					<view class="ywfw-wrapper">
						<view class="block" v-for="(item, index) in luntanScopeData" :key="index" @click="ltClick(item)"
							:class="item.active?'active':''">{{item.text}}</view>
					</view>
				</view>
				<view v-if="form.classify == '论坛'" class="row row-column">
					<view class="left">发布内容</view>
					<view class="right">
						<textarea class="textarea" v-model="form.ltInfo" placeholder="请输入" />
					</view>
				</view>
				<view class="tip-text">
					<text>1、请勿发布违反国家法律法规的内容；</text>
					<text>2、请勿发布虚假信息，并保证对所发布信息的真实性负全责。</text>
				</view>
			</view>
			<button class="public-btn" @click="publishClick()" :class="{ active: isBtnActive }"
				@touchstart="isBtnActive = true" @touchend="isBtnActive = false">
				{{isEdit ? '确认修改' : '立即发布'}}
			</button>

		</view>

		<!-- 秘籍弹出层 -->
		<uni-popup ref="mjPopup" type="center">
			<view class="mj-popup">
				<view class="mj-close" @click="closeMjPopup">
					<uni-icons type="closeempty" size="20" color="#333"></uni-icons>
				</view>
				<view class="mj-title">自我介绍秘籍</view>
				<view class="mj-content" @click="copyMjContent">
					<view class="mj-item">
						<text class="mj-item-title">1.基本信息:</text>
						<text class="mj-item-desc">在助贷行业的身份，如助贷顾问、业务经理，方便对方快速定位你的角色。</text>
					</view>
					<view class="mj-item">
						<text class="mj-item-title">2.业务专长:</text>
						<text class="mj-item-desc">点明擅长处理的贷款类型，像个人信贷、企业融资;熟悉的贷款流程环节，比如资料准备、审批协调，让对方了解你的专业领域。</text>
					</view>
					<view class="mj-item">
						<text class="mj-item-title">3.资源优势:</text>
						<text class="mj-item-desc">提及合作的金融机构数量、类型，展示丰富的资金渠道;强调能提供的独特资源，如优质项目信息、精准客户流量，突出你的资源实力。</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 底部菜单 -->
		<tab-bar :selected='2'></tab-bar>
	</view>
</template>

<script>
	import TabBar from '../../components/TabBar.vue';
	import PcaCode from '../../api/pca-code.json' //  地址
	import Sxcp from '../../api/scope-business.json' // 所需产品
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				form: {
					classify: '人才自荐', // 分类
					releaseType: '0', // 分类
					xycp: [], // 初始化为空数组
				},
				positions: ['人才自荐', '需求广场', '论坛'], // 发布分类	
				items: [], // 城市
				userScopeData: Sxcp, // 所需产品
				isBtnActive: false,
				luntanScopeData: [{
					text: '产品资源',
					active: false
				}, {
					text: '人脉资源',
					active: false
				}, {
					text: '行业服务',
					active: false
				}, {
					text: '培训资源',
					active: false
				}],
				guid: '',
				isEdit: false, // 添加编辑状态标识
				rczjList: [], // 人才自荐列表
				xqgcList: [], // 需求广场列表
				ltList: [] // 论坛列表
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.userInfo;
			},
			isLoggedIn() {
				return this.$store.state.user.isLoggedIn;
			}
		},
		async onLoad(param) {

			this.init()
			if (param && param.id) {
				// 编辑模式
				this.isEdit = true;
				this.guid = param.id;

				// 根据releaseType设置classify
				if (param.releaseType === '0') {
					this.form.classify = '人才自荐';
				} else if (param.releaseType === '1') {
					this.form.classify = '需求广场';
				} else if (param.releaseType === '2') {
					this.form.classify = '论坛';
				}
				this.form.releaseType = param.releaseType;

				// 获取详情数据
				await this.getDetail();
			}

		},
		onShow() {
			
			// this.initList() // 获取列表
			// 初始化表单数据
			if (!this.isEdit) {
				this.form = {
					classify: '人才自荐', // 默认选择人才自荐
					releaseType: '0', // 默认发布类型
					xycp: [], // 所需产品初始化为空数组
					realName: '', // 姓名
					telephone: '', // 联系方式
					info: '', // 自我介绍
					sxed: '', // 所需额度
					zjyt: '', // 资金用途
					age: '', // 年龄
					zcqk: '', // 资产情况
					zxqk: '', // 个人情况说明
					title: '', // 论坛主题
					ltInfo: '', // 论坛内容
					releaseLabel: '', // 论坛标签
					address: '', // 城市
					city: '', // 城市
					province: '' // 省份
				};
				// 重置所需产品选中状态
				this.userScopeData.forEach(item => {
					item.active = false;
				});
				// 重置论坛标签选中状态
				this.luntanScopeData.forEach(item => {
					item.active = false;
				});
			}
		},
		methods: {
			// 获取列表
			async initList() {
				try {
					// 获取审核状态为0的列表
					const data0 = {
						userId: this.userInfo.guid,
						releaseStatus: 0
					};
					const res0 = await this.$api.getReleaseinfo(data0);
					if (res0.succ && res0.data) {
						this.rczjList = res0.data.filter(item => item.releaseType === '0');
						this.xqgcList = res0.data.filter(item => item.releaseType === '1');
						this.ltList = res0.data.filter(item => item.releaseType === '2');
					}

					// 获取审核状态为1的列表
					const data1 = {
						userId: this.userInfo.guid,
						releaseStatus: 1
					};
					const res1 = await this.$api.getReleaseinfo(data1);
					if (res1.succ && res1.data) {
						this.rczjList = [...this.rczjList, ...res1.data.filter(item => item.releaseType === '0')];
						this.xqgcList = [...this.xqgcList, ...res1.data.filter(item => item.releaseType === '1')];
						this.ltList = [...this.ltList, ...res1.data.filter(item => item.releaseType === '2')];
					}

					// 获取审核状态为2的列表
					const data2 = {
						userId: this.userInfo.guid,
						releaseStatus: 2
					};
					const res2 = await this.$api.getReleaseinfo(data2);
					if (res2.succ && res2.data) {
						this.rczjList = [...this.rczjList, ...res2.data.filter(item => item.releaseType === '0')];
						this.xqgcList = [...this.xqgcList, ...res2.data.filter(item => item.releaseType === '1')];
						this.ltList = [...this.ltList, ...res2.data.filter(item => item.releaseType === '2')];
					}
				} catch (error) {
					console.error('获取列表失败:', error);
					uni.showToast({
						title: '获取列表失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			init() {
				// 初始化数据
				this.items = PcaCode.map(province => ({
					...province,
					children: province.children.map(city => ({
						...city,
						children: [] // 清空区级数据
					}))
				}))
			},
			// 添加获取详情的方法
			async getDetail() {
				try {
					const res = await this.$api.getReleaseinfoId({
						releaseId: this.guid
					});

					if (res.code === 200 && res.data) {
						const detail = res.data;
						console.log('detail', detail)

						// 根据city查找对应的省市数据
						if (detail.city) {
							console.log(this.items)
							// 遍历省市数据找到匹配的城市
							for (let province of this.items) {
								const cityObj = province.children.find(city => city.text === detail.city);
								if (cityObj) {
									// 找到匹配的城市，设置省市数据
									this.form.province = province.text;
									this.form.city = cityObj.text;
									this.form.address = [{
											value: province.value,
											text: province.text
										},
										{
											value: cityObj.value,
											text: cityObj.text
										}
									];
									console.log(this.form)
									break;
								}
							}
						}

						// 根据不同类型设置表单数据
						if (this.form.releaseType === '0') {
							// 人才自荐
							this.form = {
								...this.form,
								realName: detail.realName,
								telephone: detail.telephone,
								info: detail.info
							};
						} else if (this.form.releaseType === '1') {
							// 需求广场
							this.form = {
								...this.form,
								sxed: detail.sxed,
								zjyt: detail.zjyt,
								age: detail.age,
								zcqk: detail.zcqk,
								zxqk: detail.zxqk,
								xycp: detail.xycp || []
							};

							// 设置所需产品的选中状态
							this.userScopeData.forEach(item => {
								item.active = this.form.xycp.includes(item.text);
							});
						} else if (this.form.releaseType === '2') {
							// 论坛
							this.form = {
								...this.form,
								title: detail.title,
								ltInfo: detail.ltInfo,
								releaseLabel: detail.releaseLabel
							};

							// 设置论坛标签的选中状态
							this.luntanScopeData.forEach(item => {
								item.active = item.text === detail.releaseLabel;
							});
						}
					} else {
						uni.showToast({
							title: '获取详情失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取详情失败:', error);
					uni.showToast({
						title: '获取详情失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			// 发布分类
			onPositionChange(e) {
				if (this.isEdit) {
					uni.showToast({
						title: '编辑模式下不可修改发布类型',
						icon: 'none'
					});
					return;
				}

				if (this.positions[e.detail.value] !== this.form.classify) {
					this.form = {
						xycp: [],
						classify: this.positions[e.detail.value],
						releaseType: this.positions[e.detail.value] === '人才自荐' ? '0' : this.positions[e.detail
							.value] === '需求广场' ? '1' : '2'
					};
				} else {
					this.form.classify = this.positions[e.detail.value];
					this.form.releaseType = this.positions[e.detail.value] === '人才自荐' ? '0' :
						this.positions[e.detail.value] === '需求广场' ? '1' : '2';
				}
			},
			// 地址选择
			onAddress(e) {
				this.form.province = e.detail.value[0].text
				this.form.city = e.detail.value[0].text + e.detail.value[1].text
				this.form.address = this.form.city
			},
			// 校验联系方式格式
			validateContact(accountId) {
				// 手机号正则：1开头，11位数字
				const phoneRegex = /^1[3-9]\d{9}$/;
				// 座机正则：区号3-4位，号码7-8位，可能有分机号
				const landlineRegex = /^(0\d{2,3}-)?\d{7,8}(-\d{1,6})?$/;

				return phoneRegex.test(accountId) || landlineRegex.test(accountId);
			},
			// 所需产品选择
			ywfwClick(item) {
				item.active = !item.active;
				if (item.active) {
					// 检查是否已经选择了6个产品
					if (this.form.xycp.length >= 6) {
						item.active = false; // 取消当前选择
						uni.showToast({
							title: '最多只能选择6个产品',
							icon: 'none'
						});
						return;
					}
					this.form.xycp.push(item.text);
				} else {
					const index = this.form.xycp.indexOf(item.text); // 简化查找逻辑
					if (index > -1) {
						this.form.xycp.splice(index, 1);
					}
				}
			},
			// 论坛标签
			ltClick(item) {
				// 先清除所有选项的选中状态
				this.luntanScopeData.forEach(tag => {
					tag.active = false;
				});
				// 设置当前选项为选中状态
				item.active = true;
				// 将选中的标签值保存到form中
				this.form.releaseLabel = item.text;
			},
			// 发布
			async publishClick() {
				// 检查登录状态
				if (!this.isLoggedIn) {
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					return;
				}
				if (this.userInfo.srStatus !== '1') {
					uni.showToast({
						title: '认证完成后才能使用此功能',
						icon: 'none'
					});
					return;
				}
				// 通用校验
				if (!this.form.classify) {
					uni.showToast({
						title: '请选择发布分类',
						icon: 'none'
					});
					return;
				}

				// 根据分类进行不同校验
				if (this.form.classify === '人才自荐') {
					// 检查是否已经发布过人才自荐
					if (this.rczjList && this.rczjList.length > 0 && !this.isEdit) {
						uni.showToast({
							title: '人才自荐已发布，不可重复发布',
							icon: 'none'
						});
						return;
					}
					if (!this.form.realName) {
						uni.showToast({
							title: '请输入姓名',
							icon: 'none'
						});
						return;
					}
					// 验证姓名长度
					if (this.form.realName.length < 2 || this.form.realName.length > 5) {
						uni.showToast({
							title: '姓名长度必须在2-5个字之间',
							icon: 'none'
						});
						return;
					}
					// 验证姓名是否包含非文字字符
					if (!/^[\u4e00-\u9fa5]+$/.test(this.form.realName)) {
						uni.showToast({
							title: '姓名只能包含中文字符',
							icon: 'none'
						});
						return;
					}
					if (!this.form.address) {
						uni.showToast({
							title: '请选择城市',
							icon: 'none'
						});
						return;
					}
					if (!this.form.telephone) {
						uni.showToast({
							title: '请输入联系方式',
							icon: 'none'
						});
						return;
					}
					if (!this.validateContact(this.form.telephone)) {
						uni.showToast({
							title: '联系方式格式不正确，请输入手机号或座机号',
							icon: 'none'
						});
						return;
					}
					if (!this.form.info) {
						uni.showToast({
							title: '请输入自我介绍',
							icon: 'none'
						});
						return;
					}
				} else if (this.form.classify === '需求广场') {
					// 检查是否已经发布过相同的需求
					if (this.xqgcList && this.xqgcList.length > 0 && !this.isEdit) {
						const isDuplicate = this.xqgcList.some(item =>
							item.sxed === this.form.sxed &&
							item.zjyt === this.form.zjyt &&
							item.age === this.form.age &&
							item.zcqk === this.form.zcqk &&
							item.zxqk === this.form.zxqk &&
							item.city === this.form.city &&
							JSON.stringify(item.xycp) === JSON.stringify(this.form.xycp)
						);
						if (isDuplicate) {
							uni.showToast({
								title: '已发布过同样的需求，请勿重复发布',
								icon: 'none'
							});
							return;
						}
					}
					if (!this.form.sxed) {
						uni.showToast({
							title: '请输入所需额度',
							icon: 'none'
						});
						return;
					}
					if (!this.form.zjyt) {
						uni.showToast({
							title: '请输入资金用途',
							icon: 'none'
						});
						return;
					}
					if (!this.form.age) {
						uni.showToast({
							title: '请输入年龄',
							icon: 'none'
						});
						return;
					}
					if (!this.form.zcqk) {
						uni.showToast({
							title: '请输入资产情况',
							icon: 'none'
						});
						return;
					}
					if (!this.form.zxqk) {
						uni.showToast({
							title: '请输入个人情况说明',
							icon: 'none'
						});
						return;
					}
					if (!this.form.address) {
						uni.showToast({
							title: '请选择城市',
							icon: 'none'
						});
						return;
					}
					// 检查是否选择了至少一个产品
					if (this.form.xycp.length === 0) {
						uni.showToast({
							title: '请选择至少一个所需产品',
							icon: 'none'
						});
						return;
					}
				} else if (this.form.classify === '论坛') {
					// 检查是否已经发布过相同的论坛
					if (this.ltList && this.ltList.length > 0 && !this.isEdit) {
						const isDuplicate = this.ltList.some(item =>
							item.title === this.form.title &&
							item.ltInfo === this.form.ltInfo &&
							item.releaseLabel === this.form.releaseLabel
						);
						if (isDuplicate) {
							uni.showToast({
								title: '已发布过同样的论坛，请勿重复发布',
								icon: 'none'
							});
							return;
						}
					}
					if (!this.form.title) {
						uni.showToast({
							title: '请输入主题',
							icon: 'none'
						});
						return;
					}
					// 检查主题长度
					if (this.form.title.length > 15) {
						uni.showToast({
							title: '主题长度不能超过15个字符',
							icon: 'none'
						});
						return;
					}
					if (!this.form.releaseLabel) {
						uni.showToast({
							title: '请选择一个标签',
							icon: 'none'
						});
						return;
					}
					if (!this.form.ltInfo) {
						uni.showToast({
							title: '请输入发布内容',
							icon: 'none'
						});
						return;
					}
				}
				const requestData = {
					...this.form,
					createUserId: this.userInfo.guid,
					acountId: this.userInfo.acountId
				};

				// 为人才自荐添加 releaseStatus 参数
				if (this.form.classify === '人才自荐' && !this.isEdit) {
					requestData.releaseStatus = '展示中';
				}
				// 为需求广场添加 urgentStatus 是否加急参数
				if (this.form.classify === '需求广场' && !this.isEdit) {
					requestData.urgentStatus = false
				}

				try {
					let res;
					if (this.isEdit) {
						// 编辑模式
						requestData.guid = this.guid // 添加guid
						requestData.releaseStatus = '审核中'
						switch (this.form.classify) {
							case '人才自荐':
								res = await this.$api.infoZjupdate(requestData);
								break;
							case '需求广场':
								res = await this.$api.infoKfupdate(requestData);
								break;
							case '论坛':
								res = await this.$api.infoLtupdate(requestData);
								break;
							default:
								uni.showToast({
									title: '未知的发布类型',
									icon: 'none'
								});
								return;
						}
					} else {
						// 检查用户类型
						if (this.userInfo.userType === '普通用户') {
							try {
								// 先调用检查接口
								let data = {
									userId: this.$store.state.user.userInfo.guid
								}
								const checkRes = await this.$api.getCheckRelease(data);
								if (!checkRes.succ) {
									uni.showToast({
										title: checkRes.msg || '发布次数已用完',
										icon: 'none'
									});
									return;
								}
							} catch (error) {
								uni.showToast({
									title: '发布检查次数失败，请稍后重试',
									icon: 'none'
								});
								return;
							}
						}

						switch (this.form.classify) {
							case '人才自荐':
								res = await this.$api.infoZjcreate(requestData);
								break;
							case '需求广场':
								res = await this.$api.infoKfcreate(requestData);
								break;
							case '论坛':
								res = await this.$api.infoLtcreate(requestData);
								break;
							default:
								uni.showToast({
									title: '未知的发布类型',
									icon: 'none'
								});
								return;
						}
					}

					if (res.code === 212001) {
						uni.showToast({
							title: this.isEdit ? '修改成功' : '发布成功',
							icon: 'success'
						});
						uni.navigateTo({
							url: `/pages/my-publish/my-publish${this.form.classify === '人才自荐' ? '?isRczj=true' : ''}`
						});
					} else {
						uni.showToast({
							title: res.msg || (this.isEdit ? '修改失败' : '发布失败'),
							icon: 'none'
						});
					}
				} catch (error) {
					console.error(this.isEdit ? '修改失败:' : '发布失败:', error);
					uni.showToast({
						title: this.isEdit ? '修改失败，请稍后重试' : '发布失败，请稍后重试',
						icon: 'none'
					});
				}
			},
			// 显示秘籍弹出层
			showMjPopup() {
				this.$refs.mjPopup.open();
			},
			// 关闭秘籍弹出层
			closeMjPopup() {
				this.$refs.mjPopup.close();
			},
			// 复制秘籍内容
			copyMjContent() {
				const content = `1.基本信息:
在助贷行业的身份，如助贷顾问、业务经理，方便对方快速定位你的角色。

2.业务专长:
点明擅长处理的贷款类型，像个人信贷、企业融资;熟悉的贷款流程环节，比如资料准备、审批协调，让对方了解你的专业领域。

3.资源优势:
提及合作的金融机构数量、类型，展示丰富的资金渠道;强调能提供的独特资源，如优质项目信息、精准客户流量，突出你的资源实力。`;
				
				uni.setClipboardData({
					data: content,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.publish {
		height: 100%;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #FAEBDB 0%, rgba(255, 247, 238, 0) 500rpx);

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			padding: 0 30rpx;

			.main {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow: auto;
			}
		}

		.row {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;

			&:after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background-color: #e8e8e8;
				transform: scaleY(0.5);
			}


			.left {
				font-size: 32rpx;
				padding: 40rpx 0;
			}

			.right {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				overflow: hidden;

				input {
					width: 100%;
					border: 0;
					text-align: right;
					font-size: 32rpx;
					color: #333;
				}

				.picker {
					width: 100%;
					display: flex;
					align-items: center;

					input {
						flex: 1;
						margin-right: 10rpx;
						color: #333;
					}

				}

				.input-value-border {
					border: 0;

					.selected-area {
						justify-content: flex-end;
						padding-right: 3rpx;
					}

					.arrow-area {
						display: none;
					}

					.selected-list {
						justify-content: flex-end;
					}

					.placeholder {
						font-size: 32rpx;
					}

					.text-color {
						color: #000;
					}
				}


			}

			&.row-column {
				position: relative;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;

				&::after {
					display: none;
				}

				.right {
					flex: none;
					width: 100%;

					.textarea {
						width: 100%;
						padding: 20rpx 30rpx;
						box-sizing: border-box;
						border: 1px solid #e8e8e8;
						border-radius: 10rpx;
						color: #333;
					}
				}

				.ckmj {
					position: absolute;
					top: 40rpx;
					right: 10rpx;
					font-size: 24rpx;
					color: #AC6C17;
					display: flex;
					align-items: center;

					.img {
						width: 30rpx;
						height: 30rpx;
						background: linear-gradient(180deg, #F3B359 0%, #EC6A34 100%);
						border-radius: 30rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 24rpx;
						margin-right: 12rpx;
					}
				}
			}
		}

		.ywfw {
			// margin-top: 30rpx;

			.text {
				font-size: 30rpx;
				padding: 40rpx 0;
			}

			.ywfw-wrapper {
				display: flex;
				flex-wrap: wrap;

				.block {
					min-width: 133rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					padding: 12rpx 10rpx;
					background: #FFEFD9;
					border-radius: 10rpx;
					color: #AC6C17;
					font-size: 30rpx;
					text-align: center;

					&:nth-child(4n) {
						margin-right: 0;
					}

					&.active {
						color: #fff;
						background: linear-gradient(138deg, #F3B359 0%, #EC6A34 100%);
					}
				}

			}
		}

		.tip-text {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin: 30rpx 0;
			padding: 30rpx;
			background: #FFF7EE;
			border-radius: 10rpx;

			text {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #AC6C17;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		// 秘籍弹出层样式
		.mj-popup {
			width: 600rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 40rpx 30rpx;

			.mj-close {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				font-size: 24rpx;
			}

			.mj-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #333333;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.mj-content {
				.mj-item {
					margin-bottom: 20rpx;
					cursor: pointer; // 添加鼠标指针样式

					.mj-item-title {
						font-size: 32rpx;
						color: #AC6C17;
						font-weight: bold;
						display: block;
						margin-bottom: 10rpx;
					}

					.mj-item-desc {
						font-size: 28rpx;
						color: #666666;
						line-height: 1.5;
						display: block;
					}
				}
			}
		}
	}
</style>